<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no">
    <meta name="HandheldFriendly" content="True">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <link rel="stylesheet" href="{{url_for('static', filename='plugins/fullcalendar/fullcalendar.css') }}">
    <script type="text/javascript" src="{{ url_for('static', filename='vacation/js/JS2ObjCBridge.js') }}"></script>
    <title>价格日历</title>
    <style>
    body{
        padding: 0;
        margin: 0;
    }
    .fc-header td {
        background: #ffffff !important;
    }
    .fc-header-title {
        color: #4abdcc;
        padding-top: 5px;
        font-weight: 900;
    }
    .fc-header-title h2{
        margin: 10px 0;
    }
    .fc-event-inner {
        text-align: center;
    }
    .fc-header-right .fc-corner-right {
        float: right;
    }
    .fc-header-left .fc-corner-left {
        float: left;
    }
    .fc-corner-left, .fc-corner-right {
        background: none;
        border: 0;
        color: #4abdcc;
        margin-top: 15px;
    }
    .fc-state-default.fc-corner-right{
        box-shadow: none;
        margin-top: 8px;
    }
    .fc-day-number {
        float: left !important;
        font-size: 20px;
        color: #484848;
        margin-bottom: 1em;
        margin: 10%;
    }
    .fc-event-title {
        /* color: #fc5d7b; */
        font-weight: bold;
        font-size: 10px;
    }
    .fc-widget-content {
        height: 64px;
    }
    .fc-event {
        background: transparent !important;
        border: 0 !important;
    }
    .fc-text-arrow {
        font-size: 23px;
        border: 1px solid;
        border-radius: 25px;
        padding: 0px 6px;
    }
    thead .fc-first th{
        background: #ffffff;
        border-top: 1px solid #b0b0b0;
        border-bottom: 1px solid #b0b0b0;
        border-right: 0px;
        border-left: 0px;
        color: #484848;
    }
    #calendar tbody td {
        border: 2px solid #ffffff;
        border-radius: 4px;
        background-color: #f7f7f7;
        color: #484848;
    }
    #calendar thead .fc-first th {
        padding: 15px;
    }
    .button-disable {
        background-color: #e7e7e7 !important;
        color: #d5d5d5 !important;
    }
    .button-disable .fc-day-number {
        color: #d5d5d5 !important;
    }
    .fc-grid .fc-other-month .fc-day-number {
        opacity: 1;
    }
    </style>
</head>
<body>
    <div id="calendar"></div>
    <script src="{{url_for('static', filename='new/js/lib/jquery-1.7.2.min.js') }}"></script>
    <script src="{{url_for('static', filename='plugins/fullcalendar/fullcalendar.js') }}"></script>
    <script>
        if ( typeof(android) != "undefined") {
            android.setTitle('选择日期');
            {% if not is_breadtrip %}
                android.goBackApp(false);
                    {% if new %}
                    android.goBackURL("/order/{{ order_id }}/edit/");
                    {% else %}
                    android.goBackURL("/product/order/?product_id={{ product.pk }}&device_id={{ device_id }}&travel_date={{ travel_date }}&plan_id={{ plan_id }}&order_id={{ order_id }}");
                    {% endif %}
                android.showContactUs(true);
            {% endif %}
        } else {
            JS2ObjCBridge.call("setTitle", ['选择日期']);
            JS2ObjCBridge.call("goBackApp", [false]);
            {% if new %}
            JS2ObjCBridge.call("goBackURL", ["/order/{{ order_id }}/edit/"]);
            {% else %}
            JS2ObjCBridge.call("goBackURL", ["/product/{{product.pk}}/order/?device_id={{ device_id }}&travel_date={{ travel_date }}&plan_id={{ plan_id }}&order_id={{ order_id }}"]);
            {% endif %}
        };

        // 获取 order_id,plan_id,device_id参数信息
        function getHrefSuffix(){
            var param = location.search.replace(/\?/, '').split('&'),
                arr = [];
            param.filter(function(i){
                if(i.indexOf("plan_id") > -1 || i.indexOf("device_id") > -1 || i.indexOf("order_id") > -1){
                    arr.push(i);
                }
            });
            return arr.join('&');
        }

        function makeDeal(travel_date){
            $.get("./order_url/", {
                travel_date: travel_date,
                device_id: '{{ device_id }}',
                type_ids: '{{ type_ids }}',
            }, function(data){
                if(data.success){
                    window.location.href = data.url + '&' + getHrefSuffix();
                } else {
                    alert("抱歉,这一天不能选择,请换个日子");
                }
            })
        }

        (function(){
            var configs = {
                header: {
                    left: 'prev',
                    center: 'title',
                    right: 'next'
                },
                titleFormat: {
                    month: 'yyyy-MM'
                },
                editable: false,
                selectable: true,
                selectHelper: false,
                monthNames: ["1月", "2月", "3月", "4月","5月","6月","7月","8月","9月","10月","11月","12月"],
                monthNamesShort: ["1月", "2月", "3月", "4月","5月","6月","7月","8月","9月","10月","11月","12月"],
                dayNamesShort: ["日", "一", "二", "三", "四", "五", "六"],
                select: function(start, end, allDay){
                    var travel_date = $.fullCalendar.formatDate(start, 'yyyy-MM-dd');

                    if(travel_date < "{{today}}"){
                        alert("请选择大于今天的日期");
                        return false;
                    }
                    makeDeal(travel_date);
                },
                events: {
                    url: "./events/?type_ids={{ type_ids }}",
                    textColor: "#fc5d7b"
                },
                eventRender: function(event, element) {
                    var date = event.title;
                    $(".fc-day[data-date='"+date+"']").addClass('button-disable');
                    element.find('.fc-event-title').hide();
                },
            }
            {% if default_date %}
            configs.month = {{default_date.month - 1}};
            configs.year = {{default_date.year}};
            {% endif %}
            window.calendar = $("#calendar").fullCalendar(configs);
        })()
    </script>

</body>
